<template>
  <div>
    <!--标签使用规则：1.先定义，再使用
    语法：el-breadcrumb找到名称为Breadcrumb的组件进行展现
    定义elementUI组件：按需导入
    从elementUI中导入特定组件
    1.在element.js中导入 import {Breadcrumb} from 'element-ui'
    2.声明为全局组件，子组件也可以使用  vue.use(Breadcrumb)声明-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top: 15px;">

      <el-row gutter="20">

        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button></el-input>
        </el-col>

        <el-col :span="3">
          <el-button type="primary">主要按钮</el-button>
        </el-col>
    </el-row>



    <el-table
        :data="tableData"
        border
        style="width: 90%">
        <el-table-column
          prop="id"
          label="编号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="address"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
        </el-table-column>
      </el-table>
<hr />
      <el-upload
        class="upload-demo" drag multiple
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 500]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="1000">
            </el-pagination>

</el-card>
  </div>
</template>

<script>
  export default{
   data() {
         return {
           value: new Date(),
           tableData:[
             {},
             {},
             {},
             {}
           ],
           fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
           }
       },
       methods:{
         handleSizeChange(size){
           alert("当前展示"+size+"条")
         },
         handleCurrentChange(current){
           alert("第"+current+"页")
         },
         handleRemove(file, fileList) {
                 console.log(file, fileList);
               },
         handlePreview(file) {
                 console.log(file);
               }
       }
  }
</script>

<style lang="less" scoped>
   // .text {
   //    font-size: 14px;
   //  }

   //  .item {
   //    padding: 18px 0;
   //  }

   //  .box-card {
   //    width: 480px;
   //  }
</style>
